---
title: Tag
image: /images/user-guide/table-views/table.png
---
<Frame>
  <img src="/images/user-guide/table-views/table.png" alt="Header" />
</Frame>

Component to visually categorize or label content. 

<Tabs>

<Tab title="Usage">

```jsx
import { Tag } from "@/ui/display/tag/components/Tag";

export const MyComponent = () => {
  return (
    <Tag
      className
      color="red"
      text="Urgent"
      onClick={() => console.log("click")}
    />
  );
};
```

</Tab>

<Tab title="Props">


| Props | Type | Description |
|-------|------|-------------|
| className | string | Optional name for additional styling |
| color | string | Color of the tag. Options include: `green`, `turquoise`, `sky`, `blue`, `purple`, `pink`, `red`, `orange`, `yellow`, `gray` |
| text | string | The content of the tag |
| onClick | function | Optional function called when a user clicks on the tag |



</Tab>

</Tabs>

